<template>
    <div class="crm-left-menu full-height">
      <div class="fixed-menu full-height limit-width">
        <div class="logo-item"><i class="logo-h1"><img :src="logo"/></i></div>
        <el-menu :router = "routerMode" :default-active="left_menu_index" :default-openeds="defaultOpeneds" class="full-height clearfix limit-width" @open="handleOpen" @close="handleClose">
          <el-menu-item index="customs">
            <router-link class="pd-diff" :to="{path: 'customs'}"><i class="el-icon-setting"></i><span class="menu-link" >客户管理</span></router-link>
          </el-menu-item>
          <el-menu-item index="channels">
            <router-link class="pd-diff" :to="{path: 'channels'}"><i class="el-icon-edit"></i><span class="menu-link" >渠道管理</span></router-link>
          </el-menu-item>
          <el-menu-item index="source">
            <router-link class="pd-diff" :to="{path: 'source'}"><i class="el-icon-menu"></i><span class="menu-link" >来源管理</span></router-link>
          </el-menu-item>
          <el-menu-item index="sms">
            <router-link class="pd-diff" :to="{path: 'sms'}"><i class="el-icon-message"></i><span class="menu-link" >短信设置</span></router-link>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
</template>

<style lang="scss">

    $limit-width: 226px;

    .crm-left-menu {
      width: 15%;
      max-width: $limit-width;
      float: left;
      position: relative;
      user-select: none;
      text-align: center;

      .limit-width {
        max-width: $limit-width;
      }
    }

    .pd-diff {
      color: #48576a;
    }

    .crm-left-menu {
      .el-menu-item {
        padding-right: 0!important;
        padding-left: 0!important;

        &.is-active>.pd-diff {
          position: relative;
          background-color: #f9fafd;
          display: block;
        }

        &.is-active>.pd-diff::before {
          background-color: #f9fafd;
          content: "";
          display:block;
          width: 2px;
          background-color: #20a0ff;
          height: 100%;
          position: absolute;
          z-index: 2;
        }

        &.is-active {

        }
      }
    }

    .menu-link {
      color: inherit;
    }

    .crm-left-menu .el-menu {
      background-color: #f4f6fb;
    }

    .fixed-menu.full-height {
      position: fixed;
      width: inherit;
      z-index: 12;
    }

    .crm-left-menu>.el-menu{
      background-color: rgb(251, 252, 255);

    }

    .crm-left-menu>.el-menu>.el-submenu>.el-menu{
        background-color: rgb(244, 246, 251)
    }

    .logo-item {
        background-color: #f4f6fb;
    }

    .logo-h1{
        display: block;
        padding: 13px 0;

        img {
          height: 30px;
          display: block;
          margin: 0 auto;
        }

    }

    .logo-link{
        overflow: hidden;
        margin-top:16px;

        img{
            width: 108px;
            display: block;
        }
    }

</style>
<script>
import { MenuItem, MenuItemGroup, Col, Menu, Submenu, Row } from 'element-ui'
import Config from '../config/common'
import { mapState } from 'vuex'

export default {
  data () {
    return {
      routerMode: true,
      defaultOpeneds: ['1', '2', '3'],
      logo: Config.IMG_HOST + '/crm-logo-only.png?2'
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  },

  computed: {
    ...mapState({
      'left_menu_index': state => state.menu.left_menu_index
    })

  },

  components: {
    'el-menu-item': MenuItem,
    'el-menu-item-group': MenuItemGroup,
    'el-col': Col,
    'el-menu': Menu,
    'el-submenu': Submenu,
    'el-row': Row
  }
}
</script>
